<!-- 3D卡片效果 -->
<template>
  <main class="page-main">
    <div :id="id" class="card-3d">
      <slot></slot>
    </div>
  </main>
</template>
<script lang="ts">
export default {
  props: {
    range: {type: String},
    padding:{type:String}
  },
  components: {},
  data() {
    return {
      id: new Date().getTime() + "_keller_card-img-3d_" + Math.random(),
    }
  },
  methods: {
    getRotate(range, value, max) {
      return value / max * (range[1] - range[0]) + range[0];
    }
  },
  computed: {},
  watch: {},
  mounted() {
    let xRange = [-10, 10];
    let yRange = [-10, 10];
    if (this.$props.range) {
      const offset = this.$props.range;
      xRange = [-1 * offset, offset];
      yRange = [-1 * offset, offset];
    }
    const card = document.getElementById(this.id);
    card.style.setProperty("--padding", this.$props.padding);
    card.onmousemove = (e) => {
      const {offsetX, offsetY} = e;
      const {offsetWidth, offsetHeight} = card;
      const ry = 0 - this.getRotate(yRange, offsetX, offsetWidth);
      const rx = this.getRotate(xRange, offsetY, offsetHeight);
      card.style.setProperty("--rx", rx + "deg");
      card.style.setProperty("--ry", ry + "deg");
    }
    card.onmouseleave = (e) => {
      card.style.setProperty("--rx", "0deg");
      card.style.setProperty("--ry", "0deg");
    }

  }
}
</script>
<style scoped>
.card-3d {
  padding: var(--padding,0px);
  cursor: pointer;
  border-radius: 8px;
  transition: 0.1s;
  transform: perspective(500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  border: 1px solid #f0f0f0;
}

.card-3d img {
  border-radius: inherit;
}

.card-3d:hover {
  box-shadow: -3px -3px 10px #eaeaea, 3px 3px 10px #fff;
}
</style>